<template>
  <div :class="$style.box" :style="{
    width: positionSize.w + 'px',
    height: positionSize.h + 'px',
    left: positionSize.x + 'px',
    top: positionSize.y + 'px',
  }">
    <div :class="$style.cont" :style="{
      width:dpi.width + 'px',
      height:dpi.height + 'px',
    }">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import dataApi from '@/view/v/data-api.js'
import center from '@/modules/corejs/center/center.js'
import autoprefix from '@/modules/corejs/dom-css/autoprefix'
export default {
  data () {
    return {
      positionSize: {
        w: 0,
        h: 0,
        x: 0,
        y: 0
      }
    }
  },
  computed: {
    dpi () {
      return dataApi.core.dpi
    }
  },
  mounted () {
    // let positionSizeUpdate = this.positionSizeUpdate = () => {
    //   let {dpi} = this
    //   let positionSize = this.positionSize = center(window.innerWidth, window.innerHeight, dpi.width, dpi.height)
    //   this.$el.children[0].style[autoprefix('transform')] = 'scale(' + (positionSize.w / dpi.width) + ')'
    // }
    this.on()
    this.positionSizeUpdate()
  },
  methods: {
    positionSizeUpdate () {
      let { dpi } = this
      let positionSize = this.positionSize = center(window.innerWidth, window.innerHeight, dpi.width, dpi.height)
      this.$el.children[0].style[autoprefix('transform')] = 'scale(' + (positionSize.w / dpi.width) + ')'
    },
    on () {
      window.addEventListener('resize', this.positionSizeUpdate)
    },
    off () {
      window.removeEventListener('resize', this.positionSizeUpdate)
    }
  },
  destroyed () {
    this.off()
  }
}
</script>

<style module>
.box {
  position: absolute;
}
.cont {
  transform-origin: left top;
}
</style>
